{% load app_tags %}

{% is_demo as DEMO_MODE %}

{% if has_permission %}

<div class="bp">
<div class="wrapper">
  <!-- Navbar -->
  <nav class="main-header navbar navbar-expand navbar-white navbar-light">
    <!-- Left navbar links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
      </li>
    </ul>

    {% if user.is_superuser %}
    <ul class="navbar-nav">
      <li class="nav-item"><b class="text-muted">v{% app_version %}</b></li>
    </ul>
    {% endif %}

    <ul class="navbar-nav">
      <li class="nav-item">{% if DEMO_MODE %}<span class="badge badge-success badge-pill mx-1 my-1">DEMO</span>{% endif %}</li>
    </ul>

    <!-- Right navbar links -->
    <ul class="navbar-nav ml-auto">

      <!-- Avatar dropdown -->
      <li class="dropdown user user-menu">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
          <img src="{{ user.get_avatar_url }}" class="user-image" alt="{{ user.username|capfirst }}">
          <span class="hidden-xs">{{ user.username|capfirst }}</span>
        </a>

        <ul class="dropdown-menu">

          <li class="user-header">
            <img src="{{ user.get_avatar_url }}" class="img-circle" alt="{{ user.username|capfirst }}">
            <p>
            {{ user.username|capfirst }}
            <small>{{ user.email }}</small>
            <small>Member since {{ user.date_joined|date:"M d, Y" }}</small>
            </p>
          </li>

          <li>
            <div class="list-group list-group-flush">
              <a href="{% url 'admin:index' %}" class="list-group-item list-group-item-action">
                <i class="fas fa-fw fa-tachometer-alt nav-icon"></i> Dashboard
              </a>
              <a href="{% url 'admin:accounts_customuser_change' user.id %}" class="list-group-item list-group-item-action"><i class="fa fa-fw fa-user"></i> Profile</a>
              <a href="{% url 'admin:logout' %}" class="list-group-item list-group-item-action"><i class="fa fa-fw fa-arrow-right-from-bracket"></i> Logout</a>
            </div>
          </li>
        </ul>
      </li>

    </ul>
  </nav>
  <!-- /.navbar -->
</div>
</div>
{% endif %}